<template>
  <a-tabs v-model:activeKey="activeKey">
    <a-tab-pane key="1" tab="画布">
      <CanvasForm :canvas-form="canvasForm" @setCanvas="emits('update:canvasForm', $event)" />
    </a-tab-pane>
    <a-tab-pane key="2" tab="元素" force-render>
      <ElementForm v-if="elForm" :form="elForm" :fieldList="fieldList" @changeData="emits('changeElData')" />
      <div v-else style="padding: 20px; text-align: center; font-size: 18px; color: #ccc">请点击选择元素</div>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import CanvasForm from './canvasForm.vue'
import ElementForm from './elementForm.vue'

const emits = defineEmits(['update:canvasForm', 'changeElData'])

const props = defineProps<{
  elForm: any
  canvasForm: any
  fieldList: any[]
}>()

watch(
  () => props.elForm,
  (val) => {
    if (!val) {
      activeKey.value = '1'
    } else {
      activeKey.value = '2'
    }
  }
)

const activeKey = ref()
</script>
